<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="time">
        <img src="images/0.png" alt="">
        <img src="images/0.png" alt="">
        <span>:</span>
        <img src="images/0.png" alt="">
        <img src="images/0.png" alt="">
        <span>:</span>
        <img src="images/0.png" alt="">
        <img src="images/0.png" alt="">
    </div>
    <script>
        var img = document.querySelectorAll(".time img");
        function showTime(){
            // 获取时间，时分秒。
            var nowTime = new Date();
            var hours = nowTime.getHours();//时
            var minutes = nowTime.getMinutes();//分
            var seconds = nowTime.getSeconds();//秒
            // 拼接成一个字符串
            var countdown = num(hours)+num(minutes)+num(seconds);
            // 将每一个图片路径设置对应的数字。
            for(let i=0;i<img.length;i++){
                    img[i].src = `images/${countdown[i]}.png`;
                    console.log('img[i]: ', img[i]);
            }
            // 回调函数超时调用
            setTimeout(function(){
                console.log(countdown);
                showTime();
            },1000)
        }
        showTime()
        
        // 一位数补零，并且转化为字符串
        function num(num){
            if (num<10){
                return num= "0"+num;
            }
            return num =num+"";
        }
    </script>
</body>
</html>